<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
  <title>地图显示</title>
  <style>
    html,
    body,
    #container {
      width: 500px;
      height: 500px;
    }
    #panel{
      position: absolute;
      top: 10px;
      right: 20px;
    }
  </style>
</head>
<body>
<div id="panel" ></div>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=bb41c485d4ac778506ace9402efd9cb1"></script>
<script>
  var map = new AMap.Map('container', {
    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
    zoom: 5, //初始化地图层级
    center: [116.397428, 39.90923] //初始化地图中心点
  });
  AMap.plugin('AMap.Driving', function () {
    var driving = new AMap.Driving({
      policy: AMap.DrivingPolicy.LEAST_TIME,
      map: map,
      // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
      panel: 'panel'
    })

    var startLngLat = [116.379028, 39.865042]
    var endLngLat = [116.427281, 39.903719]

    driving.search(startLngLat, endLngLat, function (status, result) {
      // 未出错时，result即是对应的路线规划方案
      console.log(result)
    })
  })

</script>
</body>
</html>
